<!DOCTYPE html>
<html>
<head>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/jsp/head.jsp"%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-tree.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-table.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-combobox.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-datetimepicker.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-validate.css">
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-text.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-button.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-tree.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-menu.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-combobox.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-popup.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-modal.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-radio.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-checkbox.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-datetimepicker.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-form.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-validate.js"></script>
<script src="${pageContext.request.contextPath}/static/js/menu.js"></script>
<script src="${pageContext.request.contextPath}/static/js/data/data.js"></script>
<script type="text/javascript">
$(function () {
	
    $("#validateTable").BootstrapTable({
		columns: [
			{display : '登录名', name: 'loginName',
				readonly: true,				
				editor: {
					render: function(value){
						return "登录:"+value;
					}
				}
			},
			{display : '姓名', name: 'userName',
				width: '10%',
	            validators: {
	                notEmpty: {
	                    message: '姓名必须填写！'
	                },
	            }				
			},
			{display : '电话', name: 'userPhone', type: 'number',
				width: '10%',
	            validators: {
	                notEmpty: {
	                    message: '电话必须填写！'
	                },
	                regexp: {
	                	regexp: /^[0-9]*$/,
	                	message: '格式不正确！'
	                },
	                different: {
	                	field: 'userMPhome',
	                	message: '电话和手机不能相同！'
	                },
	            },
	            onChange: function(value,cell,row){
	    			var column = 'userEmail';
	    			var obj = row.find('td[name='+column+']');
	    			obj.find('.value-input').val(value+'@qq.com');	            	
	            }
			},
			{display : '移动电话', name: 'userMPhome', type: 'number',
				validators: {
					different: {
	                	field: 'userPhone',
	                	message: '电话和手机不能相同！'
	                },					
				}
			},
			{display : '电子邮箱', name: 'userEmail'},
			{
				display : '职务', 
				name: 'pose',
				width: '10%',
				editor: {
	    	    	type: 'combobox',
	    	    	options: {
	    	    		name: 'pose',
	    	    		data: [
	    	    		       {value: 10000, text: "业务员"},
	    	    		       {value: 20000, text: "经理"},
	    	    		       {value: 30000, text: "总裁"},
	    	    		    ]
	    	    	},
		            validators: {
		                notEmpty: {
		                    message: '职务必须填写！'
		                },
		            }
				}				
            },
			{
				display : '上级领导', 
				name: 'leader',
				width: '15%',
				editor: {
	    	    	type: 'popup',
	    	    	options: {
	    	        	readonly: false,
	    	        	multiMode: true,
	    	        	header: '人员选择',
	    	        	valueField: 'loginName',
	    	        	textField: 'userName',
	    	        	editor: {
	    	        		type: 'table',
	    	        		options: {
	    	        			columns: [
	    	      						{display : '登录名', name: 'loginName'},
	    	      						{display : '姓名', name: 'userName'},
	    	      						{display : '电话', name: 'userPhone'},
	    	      						{display : '移动电话', name: 'userMPhome'},
	    	      						{display : '电子邮箱', name: 'userEmail'},
	    	        			],
	    	     				url: '${pageContext.request.contextPath}/TtApplicationUserController/getUserList',		
	    	     				usePager: false
	    	        		}
	    	        	},
	    	    	},
		            validators: {
		                notEmpty: {
		                    message: '人员必须填写！'
		                },
		            }		            
				}
            },
            
			{
				display : '生日', 
				name: 'birthDay',
				width: '18%',
				editor: {
	    	    	type: 'datetime',
	    	    	options: {
	    	            language: 'zh-CN',
	    	            autoclose: true,
	    	            todayBtn: true,
	    	            pickerPosition: "bottom-left",
	    	            minuteStep: 5,
	    	            format: 'yyyy-mm-dd',
	    	            minView: 'month'
	    	    	},
		            validators: {
		                notEmpty: {
		                    message: '生日必须填写！'
		                },
		            }
				}				
            },            
		],
		actions: [
		    {
		    	text: '表格校验',
		    	position: 'top',
		    	type: 'button',
		    	//icon: 'alert',
		    	cls: 'btn-sm btn-success',
		    	execute: function(){
		    		var validate = $(this).BootstrapTable('validate');
		    		if(!validate){
		    			alert("校验未通过！");
		    		}else{
		    			alert("校验通过！");
		    		}
		    	}
		    },
		    {
		    	text: '获取数据',
		    	position: 'top',
		    	type: 'button',
		    	cls: 'btn-sm btn-success',
		    	execute: function(){
		    		var data = $(this).BootstrapTable('getData');
		    		alert(JSON.stringify(data));
		    	}
		    }		    
		],
		data: mydata,
		readonly: false,
		usePager: false,
	});
    
});

</script>
</head>

<body> 
	<div class="container">
		<nav id="menu"></nav>
		  
		<div class="panel panel-default">
	        <div class="panel-heading">表格校验</div>
			<div class="panel-body">			
                <div id="validateTable"></div>
		    </div>
		    <div class="panel-footer">
		    表格校验简略说明：                                                                                                                                                    </br>
		    $("#validateTable").BootstrapTable({                          </br>
				columns: [                                                 </br>
					{display : '登录名', name: 'loginName', readonly: true},  </br>
					{display : '姓名', name: 'userName',                      </br>
			            validators: {                                       </br>
			                notEmpty: {                                    </br>
			                    message: '姓名必须填写！'                           </br>
			                },                                             </br>
			            }                                                    </br>				
					},                                                       </br>
					{display : '电话', name: 'userPhone', type: 'number',        </br>
			            validators: {                                         </br>
			                notEmpty: {                                        </br>
			                    message: '电话必须填写！'                          </br>
			                },                                                 </br>
			                regexp: {                                           </br>
			                	regexp: /^[0-9]*$/,                            </br>
			                	message: '格式不正确！'                             </br>
			                }                                                  </br>
			            }                                                       </br>				
					},                                                           </br>
					{display : '移动电话', name: 'userMPhome', type: 'number'},    </br>
					{display : '电子邮箱', name: 'userEmail'},                     </br>
					{                                                              </br>
						display : '职务',                                         </br>
						name: 'pose',                                              </br>
						width: '10%',                                             </br>
						editor: {                                                   </br>
			    	    	type: 'combobox',                                      </br>
			    	    	options: {                                              </br>
			    	    		name: 'pose',                                      </br>
			    	    		data: [                                             </br>
			    	    		       {value: 10000, text: "业务员"},                </br>
			    	    		       {value: 20000, text: "经理"},                   </br>
			    	    		       {value: 30000, text: "总裁"},                 </br>
			    	    		    ]                                                  </br>
			    	    	},                                                      </br>
				            validators: {                                             </br>
				                notEmpty: {                                            </br>
				                    message: '职务必须填写！'                                </br>
				                },                                                   </br>
				            }                                                          </br>
						}                                                               </br>
		            },                                                                   </br>
					{                                                                   </br>
						display : '生日',                                                </br>
						name: 'birthDay',                                               </br>
						width: '18%',                                                    </br>
						editor: {                                                         </br>
			    	    	type: 'datetime',                                              </br>
			    	    	options: {                                                     </br>
			    	            language: 'zh-CN',                                          </br>
			    	            autoclose: true,                                         </br>
			    	            todayBtn: true,                                         </br>
			    	            pickerPosition: "bottom-left",                             </br>
			    	            minuteStep: 5,                                               </br>
			    	            format: 'yyyy-mm-dd',                                     </br>
			    	            minView: 'month'                                            </br>
			    	    	},                                                              </br>
				            validators: {                                                    </br>
				                notEmpty: {                                                 </br>
				                    message: '生日必须填写！'                                     </br>
				                },                                                            </br>
				            }                                                                  </br>
						}                                                                   </br>
		            },                                                                        </br>
				],                                                                            </br>
				actions: [                                                                    </br>
				    {                                                                           </br>
				    	text: '&ltbutton class="btn btn-success btn-sm"&gt表格校验&lt/button&gt',         </br>
				    	position: 'top',                                                      </br>
				    	execute: function(){                                                    </br>
				    		var validate = $(this).BootstrapTable('validate');                  </br>
				    		if(!validate){                                                     </br>
				    			alert("校验未通过！");                                                </br>
				    		}else{                                                              </br>
				    			alert("校验通过！");                                                 </br>
				    		}                                                                    </br>
				    	}                                                                         </br>
				    }                                                                             </br>
				],                                                                               </br>
				data: mydata,                                                                      </br>
				readonly: false,                                                                  </br>
				usePager: false                                                                    </br>
	        });		                                                                                 </br>
			        对表格的特定列进行校验，需要在该列中定义validators属性                                                                                                                                                                                                </br>
			        目前有6种校验形式，分别是：                                                                                                                                                                                              </br>
			        非空校验              	    notEmpty                                                 </br>
			         长度校验              	    stringLength                                                 </br>
			          相同校验              	    identical                                                 </br>
			           相异校验              	    different                                                 </br>
			            正则校验              	    regexp                                                 </br>
			            远程校验              	    remote                                                 </br>
			            当该列的值改变时会触发校验                                                                                                                                                                                         </br>
			            方法validate可以对表格显示的所有列进行校验                                                                                                                                                      </br>
		    </div>
	    </div>
		
    </div>
</body>

</html>